<template>
  <div class="mainCate" v-for="item in mainLists" :key="item.index">
    <div class="con">
      <div class="top">
        <div class="text">
          <span class="frist">{{ item.title1 }}</span>
          <span class="two">{{ item.title2 }}</span>
        </div>
        <!-- <ul v-if="item.topList.length">
          <li :class="{ is_li_active: item.activeId === i.id }" @mouseenter="enterOne(i.id, index, subIndex)" v-for="(i, subIndex) in item.topList" :key="i.id">{{ i.name }}</li>
        </ul> -->
      </div>
      <div class="bottom">
        <el-space style="width: 100%; height: 100%" :wrap="true" v-if="item.bottomList.length">
          <el-space direction="vertical" class="main_item" v-for="l in item.bottomList" :key="l.id">
            <el-image @click="toDetail(l.id)" style="width: 100%; height: 150px; cursor: pointer" :src="l.image" :fit="fill"></el-image>
            <span @click="toDetail(l.id)" class="sp_0">{{ l.storeName }}</span>
            <el-space>
              <span class="sp_1">¥{{ l.vipPrice }}</span>
              <span class="sp_2">¥{{ l.price }}</span>
            </el-space>
          </el-space>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script>
// import debounce from 'lodash'
export default {
  name: 'maincate',
  data() {
    return {
      // 童书
      list: [],
      // 主体数据
      itemList: [],
      // 当前列表id
      cid: null,
      // 当前活跃id
      activeId: null,
      // 需要渲染的数据
      mainLists: [
        {
          title1: '童',
          title2: '书',
          index: 22,
          activeId: 881,
          activeBotton: 0,
          bottomList: [],
        },
        {
          title1: '文',
          title2: '学',
          index: 29,
          activeId: 1099,
          activeBotton: 0,
          bottomList: [],
        },
        {
          title1: '历',
          title2: '史',
          index: 1,
          activeId: 747,
          activeBotton: 0,
          bottomList: [],
        },
        {
          title1: '经',
          title2: '济',
          index: 4,
          activeId: 759,
          activeBotton: 0,
          bottomList: [],
        },
        {
          title1: '管',
          title2: '理',
          index: 7,
          activeId: 1068,
          activeBotton: 0,
          bottomList: [],
        },
        {
          title1: '心',
          title2: '理学',
          index: 24,
          activeId: 919,
          activeBotton: 0,
          bottomList: [],
        },
      ],
    }
  },
  mounted() {
    this.getCateLists()
  },
  methods: {
    getCateLists() {
      this.$http
        .get('category')
        .then((res) => {
          this.mainLists.forEach((item) => {
            this.$http.get('products', { params: { page: 1, limit: 12, cid: res.data.data[item.index].id, recommend: '是' } }).then((res) => {
              item.bottomList = res.data.data.list
            })
          })
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    enterOne(id, index, sunIndex) {
      this.mainLists[index].activeId = id
      this.mainLists[index].activeBotton = sunIndex
    },
    getItemLists() {
      console.log(this.cid)
      this.$http
        .get('products?cid=' + this.cid)
        .then((res) => {
          this.itemList = res.data.data.list.slice(0, 12)
          console.log(this.itemList)
        })
        .catch((e) => {
          console.log(e.message)
        })
    },
    // 去详情页
    toDetail(id) {
      // console.log(row)
      let routeUrl = this.$router.resolve({
        path: '/detail',
        query: {
          id: id,
        },
      })
      window.open(routeUrl.href, '_blank')
    },
  },
}
</script>

<style scoped lang="scss">
.mainCate {
  margin-top: 30px;
  .con {
    @include h_w(100%, auto);
    .top {
      @include h_w(100%, 50px);
      @include flex1(row, flex-start, center);
      @include border1(2px, 50px);
      position: relative;
      border-bottom: 1px solid #487a6f;
      .text {
        @include h_w(115px, 100%);
        .frist {
          display: inline-block;
          @include h_w(43px, 43px);
          @include circular(50%);
          background: #487a6f;
          @include text_center(43px);
          font-family: revert;
          font-size: 24px;
          color: #fff;
          font-weight: bold;
          margin-right: 8px;
        }
        .two {
          font-size: 20px;
          font-weight: bold;
          color: #487a6f;
        }
      }
      ul {
        height: 35px;
        max-width: 1092px;
        overflow: hidden;
        position: absolute;
        left: 115px;
        top: 17px;
        li {
          padding: 2px 17px 0;
          height: 30px;
          line-height: 32px;
          float: left;
          color: #666;
          font-size: 14px;
          font-family: 'Microsoft Yahei';
          margin-right: 4px;
          cursor: pointer;
        }
      }
    }
    .bottom {
      @include h_w(1200px, 513px);
      padding-top: 20px;
      .main_item {
        width: 150px;
        height: 170px;
        margin-right: 42px;
      }
      // background: #626565;
      .sp_0 {
        color: #000;
        text-decoration: none;
        font-family: Arial;
        cursor: pointer;
        display: block;
        height: 35px;
        overflow: hidden;
        &:hover {
          text-decoration: underline;
          color: #ec7814;
        }
      }
      .sp_1 {
        color: #c30;
        font-weight: bold;
        font-family: 'Arial';
        font-size: 14px;
      }
      .sp_2 {
        color: #aaa;
        font-weight: bold;
        font-family: 'Arial';
        font-size: 14px;
        text-decoration: line-through;
      }
    }
  }
}
.is_li_active {
  background: #fff;
  border-radius: 6px 6px 0 0;
  border: 2px solid #487a6f;
  border-bottom-color: rgb(72, 122, 111);
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom: none;
  color: #4e8176;
  padding: 0 15px;
  font-weight: bold;
}
</style>
